body, ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.box {
    width: 400px;
    margin: 0 auto;
}

.picList {
    width: 400px;
    height: 270px;
    perspective: 400px;
    -webkit-perspective: 400px;
}

.picList li {
    width: 25px;
    height: 270px;
    float: left;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-135px);
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(-135px);
}

.picList a {
    width: 100%;
    height: 270px;
    position: absolute;
    left: 0;
    top: 0;
}

.picList span {
    width: 270px;
    height: 270px;
    background: #333;
    position: absolute;
    top: 0;
}

.picList li a:hover{
    cursor: default;
}

.picList li a:nth-of-type(1) {
    background: url(img/1.jpg) no-repeat;
    transform: translateZ(135px);
    -webkit-transform: translateZ(135px);
}

.picList li a:nth-of-type(2) {
    background: url(img/2.jpg) no-repeat;
    transform: translateZ(-135px) rotateX(90deg);
    transform-origin: top;
    -webkit-transform: translateZ(-135px) rotateX(90deg);
    -webkit-transform-origin: top;
}

.picList li a:nth-of-type(3) {
    background: url(img/3.jpg) no-repeat;
    transform: translateZ(-135px) rotateX(180deg);
    -webkit-transform: translateZ(-135px) rotateX(180deg);
}

.picList li a:nth-of-type(4) {
    background: url(img/4.jpg) no-repeat;
    transform-origin: bottom;
    transform: translateZ(-135px) rotateX(-90deg);
    -webkit-transform-origin: bottom;
    -webkit-transform: translateZ(-135px) rotateX(-90deg);
}

.picList li span:nth-of-type(1) {
    left: 0;
    transform-origin: left;
    transform: translateZ(135px) rotateY(90deg);
    -webkit-transform-origin: left;
    -webkit-transform: translateZ(135px) rotateY(90deg);
}

.picList li span:nth-of-type(2) {
    right: 0;
    transform-origin: right;
    transform: translateZ(135px) rotateY(-90deg);
    -webkit-transform-origin: right;
    -webkit-transform: translateZ(135px) rotateY(-90deg);
}